<template>
	<view 
		class="filter-wrapper" 
		:style="{ height: height + 'rpx', top: top,'border-top':border?'1rpx solid #f2f2f2':'none' }" 
		@touchmove.stop.prevent="discard"
	>
		<view class="inner-wrapper">
			<view class="mask" :class="showMask ? 'show' : 'hide'" @tap="tapMask"></view>
				<view class="navs">
					<view 
						class="c-flex-align c-flex-center" 
						:class="index < navData.length-1?'border-r':''"
						v-for="(item, index) in navData" 
						:key="index" 
						@click="navClick(index)"
					>
						<view class="mr-10" :class="index === actNav?'actNav':''">{{ item.title }}</view>
						<u-icon name="arrow-up-fill" color="#4d7df9" size="12" v-if="index === actNav" />
						<u-icon name="arrow-down-fill" size="12" v-else/>
					</view>
					<!-- <view class="date-wrapper">
						<picker mode="date" @change="handleDate">
							<view class="date c-flex-align c-flex-center" :style="{ height: height + 'rpx' }" @click="dateClick">
								<view>{{ selDate }}</view>
								<u-icon name="arrow-down-fill" size="12" />
							</view>
						</picker> 
					</view>-->
				</view>
				<scroll-view scroll-y="true" class="popup" :class="popupShow ? 'popupShow' : ''">
					<view v-if="navData[actNav].type!=='dateRange'">
						<view 
							class="item-opt" 
							:class="item.select ? 'actOpt' : ''" 
							v-for="(item, index) in navData[actNav].items" 
							:key="index" 
							@click="handleOpt(index)"
						>
							{{ item.text }}
							<u-icon name="checkmark" color="#4d7df9" size="20" v-if="item.select" />
						</view>
					</view>
					<view class="padding-50 flex flex--row justify-center align-center" v-else>
						<view class="width-360" @click="showCalendar=true">
							<u-input 
								v-model="selDate" 
								placeholder="选择日期范围" 
								clearable 
								disabled 
								disabledColor="#fff"  
								inputAlign="center"
							/>
						</view>
						<view class="mt-50 flex justify-center">
							<view class="mr-40 width-160"><u-button text="重置" @click="resettingDate" /></view>
							<view class="width-160"><u-button type="primary" text="确定" @click="handleDate" /></view>
						</view>
					</view>
				</scroll-view>
		</view>
		<u-calendar
			:show="showCalendar" 
			mode="range" 
			@confirm="confirmDate" 
			@close="showCalendar = false" 
			:minDate="dateDispose.minDate"
			:maxDate="dateDispose.maxDate"
			monthNum ="14"
			color="#e54d42"
			title="选择日期范围"
		/>
	</view>
</template>

<script>
import setDate from '@/common/date.js';
export default {
	props: {
		height: {
			type: Number,
			default: 108
		},
		top: {
			type: String,
			default: 'calc(var(--window-statsu-bar) + 44px)'
		},
		border: {
			type: Boolean,
			default: false
		},
		filterData: {
			//必填
			type: Array,
			default: () => {
				return [];
			}
		},
		defaultIndex: {
			//默认选中条件索引,超出一类时必填
			type: Array,
			default: () => {
					return [0];
			}
		}	
    },
	data() {
		return {
			dateDispose:{
				minDate:setDate.getDate(-365),
				maxDate:setDate.getDate(0)
			},
			showCalendar: false,
			navData: [],
			popupShow: false,
			showMask: false,
			actNav: null,
			selDate: '',
			selIndex: [] //选中条件索引
		};
	},
	created() {
		this.navData = this.filterData;
		this.selIndex = this.defaultIndex;
		this.keepStatus();
	},
	mounted() {
		// this.selDate = getCurDateTime().formatDate;
	},
	methods: {
		resettingDate(){
			this.selDate = ''
			this.$emit('dateChange', '');
			this.tapMask()
		},
		confirmDate(dates){
			this.selDate = `${dates[0].slice(5)} 到 ${dates[dates.length-1].slice(5)}`
			this.showCalendar = false
		},
		keepStatus() {
			this.navData.forEach(itemnavData => {
				itemnavData.items.map(child => {
					child.select = false;
				});
				return itemnavData;
			});
			for (let i = 0; i < this.selIndex.length; i++) {
				let selindex = this.selIndex[i];
				this.navData[i].items[selindex].select = true;
			}
		},
		navClick(index) {
			if (index === this.actNav) {
				this.tapMask();
				return;
			}
			this.actNav = index;
			// if(this.navData[index].type === 'dateRange'){
			// 	this.showCalendar = true
			// 	return 
			// }
			this.popupShow = true;
			this.showMask = true;
		},
		handleOpt(index) {
			this.selIndex[this.actNav] = index;
			this.keepStatus();
			setTimeout(() => {
					this.tapMask();
			}, 100);
			let data = [];
			let res = this.navData.forEach(item => {
				let sel = item.items.filter(child => child.select);
				data.push(...sel);
			});
			this.$emit('onSelected', data);
		},
		tapMask() {
			this.showMask = false;
			this.popupShow = false;
			this.actNav = null;
		},
		handleDate() {
			this.$emit('dateChange', this.selDate)
			this.tapMask()
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	font-size: 28rpx;
}
.c-flex-align {
	display: flex;
	align-items: center;
}
.c-flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
.filter-wrapper {
	position: fixed;
	left: 0;
	width: 750rpx;
	z-index: 999;
	.inner-wrapper {
		.navs {
			position: relative;
			padding: 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			border-bottom: 2rpx solid #f5f6f9;
			z-index: 999;
			box-sizing: border-box;
			& > view {
				flex: 1;
				height: 100%;
				flex-direction: row;
				z-index: 999;
			}
			.date {
				justify-content: flex-end;
			}
			.actNav {
				color: #4d7df9;
				font-weight: bold;
			}
		}
			.mask {
				z-index: 666;
				position: fixed;
				top: calc(var(--status-bar-height) + 44px);
				left: 0;
				right: 0;
				bottom: 0;
				background-color: rgba(0, 0, 0, 0);
				transition: background-color 0.15s linear;
				&.show {
					background-color: rgba(0, 0, 0, 0.4);
				}
				&.hide {
					display: none;
				}
			}
			.popup {
				position: relative;
				width: 670rpx;
				max-height: 500rpx;
				background-color: #fff;
				overflow: scroll;
				z-index: 999;
				transition: all 1s linear;
				opacity: 0;
				display: none;
				padding: 0 40rpx;
				.item-opt {
					height: 100rpx;
					border-bottom: 2rpx solid #f5f6f9;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.actOpt {
					color: #4d7df9;
				}
			}
		.popupShow {
			display: block;
			opacity: 1;
		}
	}
	.icon-triangle {
			width: 16rpx;
			height: 16rpx;
			margin-left: 10rpx;
	}
}
</style>
